<template>
    <div class="movie_container">
        <div class="head">
            <div class="movie_top">
                <span class="back el-icon-arrow-left" @click="back"></span>
                杂志
            </div>
            <div class="movie_img">
                <img src="../../assets/images/47.gif" alt="">
            </div>
        </div>
        <div class="movie_name">
            <div class="movie_name_left">
                <h1>时尚新娘</h1>
                <ul>
                    <li>2016年9月刊</li>
                    <li>标签:时尚/国际/新娘</li>
                </ul>
            </div>
            <div class="movie_name_right">
                <span class="praise"><span class="el-icon-circle-check"></span>21512</span>
                <span class="no_praise"><span class="el-icon-circle-close"></span>522154</span>
            </div>
        </div>
        <div class="movie_choose">
            <span class="money">订阅<span class="el-icon-arrow-right"></span></span>
        </div>
        <div class="movie_intro">
            <h2>简介</h2>
            <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴<span class="el-icon-arrow-down"></span></p>
        </div>
        
    </div>
</template>
<script>
    export default {
        name:"magazine",
        data(){
            return{

            }
        },
        methods:{
            back(){
                this.$router.go(-1);
            }
        }
    }
</script>
<style lang="less" scoped>
@rem:35rem;
.head{
    background:#3c3e4b;
}
.movie_top{
    color:#fff;
    height:30/@rem;
    padding-top:10/@rem;
    text-align:center;
    padding:0 5/@rem;
    font-size:16/@rem;
    font-weight:bold;
    line-height:30/@rem;
    
    .back{
        float:left;
        line-height:30/@rem;
    }
} 
.movie_img{
    text-align:center;
    margin:20/@rem 0 0 0;
    padding-bottom:20/@rem;
    img{
        border:none;
        margin:0;
        padding:0;
        width:180/@rem;
        height:240/@rem;
    }
}  
.movie_name,.movie_choose,.movie_intro,.movie_actor{
    padding:0 10/@rem;
}
.movie_name{
    margin-top:20/@rem;
    overflow:hidden;
    line-height:20/@rem;
    .movie_name_left{
        float:left;
        h1{
            font-size:20/@rem;
        }
        ul{
            margin-top:5/@rem;
        }
    }
    .movie_name_right{
        margin-top:10/@rem;
        float:right;
        span{
            display:inline-block;
            
        }
        .praise{
            margin-right:15/@rem;
        }
        .praise span,.no_praise span{
            color:#75acfc;
            font-size:20/@rem;
            margin-right:5/@rem;
        }
    }
} 
.movie_choose{
    margin-top:20/@rem;
    overflow:hidden;
    .ticket{
        float:left;
    }
    .money{
        float:right;
        color:#2682ff;
    }
}
.movie_intro{
    margin-top:20/@rem;
    line-height:20/@rem;
    p{
        margin-top:5/@rem;
        line-height:30/@rem;
        overflow:hidden;
        span{
            margin-top:10/@rem;
            float:right;
            font-weight:bold;
        }
    }
}

</style>